<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
      <h1> 局部自定义指令的使用</h1>
      <!-- v- 自定义的名字 -->
        <input type="text"  v-color='msg'>


        <span v-font>  hello 局部自定义指令 </span>
    </div>
    <hr>
    <!-- <div id='app2'>
        <input type="text"  v-color>

    </div> -->
    <script>
        new Vue({
            el: '#app',
            data: {
                msg:'red'
            },
            // 局部自定义指令
            directives:{
                // '自定义指令的名字':{  } 
                // color  指令的名字
                color:{
                    inserted:function(el,binding) {
                        console.log(binding);

                       el.style.backgroundColor=binding.value   
                    }
                },
                font:{
                    inserted:function(el,binding) {
                        console.log(binding);

                       el.style.fontSize='100px' 
                    } 
                }

            }  
        })


        // new Vue({
        //     el:"#app2"
        // })
    </script>
</body>

</html>